<template>
	<view class="swiper-content">
		<view class="hander-top p-lr-32 w-s flex-j-sb--a-ct">
			<view class="count">{{currentImg + 1}} / {{ imgs.length }}</view>
		</view>

		<swiper class="swiper-img" :current="currentImg" :duration="300" @change="changeSwiper">
			<swiper-item class="swiper-item" v-for="(item, index) in imgs" :key="index">
				<view class="img-page">
					<movable-area scale-area>
						<movable-view direction="all" scale="true" scale-min="1" scale-max="4">
							<image class="max-img" :src="item.url" :lazy-load="true" mode="aspectFit" />
						</movable-view>
					</movable-area>
				</view>
			</swiper-item>
		</swiper>
		<view class="item-bottom">
			<scroll-view class="scroll-view_H " :scroll-x="true" :scroll-into-view="scrollTopIndex"
				:scroll-with-animation="true" scroll-left="20">
				<view class="img-page-box scroll-view-item_H" :class="currentImg == index ? 'img-page-checked' : ''"
					v-for="(item, index) in imgs" :key="index" :id="`scrollToIndex${index}`" @click.stop="toImg(index)">
					<image class="img" :src="item.url" mode="aspectFill" />
				</view>
			</scroll-view>
		</view>

		<view class="handle-wrap flex-j-sb--a-ct p-lr-32">
			<!-- <view class="w-64 h-64" @click="isScale = !isScale">
				<image v-show="isScale" class="w-64 h-64" src="https://qianxunyanxue-applet.obs.cn-north-4.myhuaweicloud.comicon-scale-yes.png" mode="widthFix" />
				<image v-show="!isScale" class="w-64 h-64" src="http://qianxueapplet.suoeryun.com/icon-scale.png" mode="widthFix" />
			</view>

			<view class="w-64 h-64" @click="isCollect = !isCollect">
				<image v-show="isCollect" class="w-64 h-64" src="http://qianxueapplet.suoeryun.com/icon-collect-yes.png" mode="widthFix" />
				<image v-show="!isCollect" class="w-64 h-64" src="http://qianxueapplet.suoeryun.com/icon-collect.png" mode="widthFix" />
			</view>

			<view class="w-64 h-64" @click="isLike = !isLike">
				<image v-show="isLike" class="w-64 h-64" src="http://qianxueapplet.suoeryun.com/icon-like-yes.png" mode="widthFix" />
				<image v-show="!isLike" class="w-64 h-64" src="http://qianxueapplet.suoeryun.com/icon-like.png" mode="widthFix" />
			</view>

			<image class="w-64 h-64" src="http://qianxueapplet.suoeryun.com/icon-set-wallpaper.png" mode="widthFix" />
			<image class="w-64 h-64" src="http://qianxueapplet.suoeryun.com/icon-share.png" mode="widthFix" /> -->
			<image class="w-64 h-64"
				src="http://qianxueapplet.suoeryun.com/icon-download.png" mode="widthFix"
				@click="handleDownload" />
			<image class="w-64 h-64"
				src="http://qianxueapplet.suoeryun.com/icon-download.png" mode="widthFix"
				@click="handleDel" />
		</view>

		<view class="pop" v-if="isPop">
			<view class="item" @click.stop="share()">分享图片</view>
			<!-- #ifndef H5 -->
			<view class="item" @click.stop="saveImg(false)">保存图片</view>
			<view class="item" @click.stop="saveImg(true)">保存全部图片</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import {
		qxCloudMediaDelete
	} from "@/config/mine.api";
	export default {
		data() {
			return {
				currentImg: 0,
				isPop: false,
				scrollTopIndex: "",

				isScale: false,
				isCollect: false,
				isLike: false,
			};
		},
		props: {
			imgs: {
				type: Array,
				default: () => ([])
			}
		},
		onLoad(options) {
			// let { imgs, current } = options;
			// this.imgs = JSON.parse(imgs);
			// this.currentImg = current;
			console.log(this.imgs, 'sdf');
		},
		mounted() {
			console.log(this.imgs, 'mounted');
		},
		methods: {
			/**
			 * 下载
			 */
			handleDownload() {
				uni.showLoading({
					title: '正在保存，请稍等。。。'
				});
				uni.downloadFile({
					url: this.imgs[this.currentImg].url,
					success(tempFilePaths) {
						console.log(tempFilePaths, 'tempFilePaths');
						let getFileSystemManager = uni.getFileSystemManager();
						getFileSystemManager.saveFile({
							tempFilePath: tempFilePaths?.tempFilePath,
							success: function(res) {
								console.log(res.savedFilePath, 'res');
								uni.hideLoading();
								uni.showToast({
									icon: 'none',
									title: "文件保存成功！"
								})
							},
							fail(err) {
								uni.hideLoading();
								console.log(err);
								uni.showToast({
									icon: 'none',
									title: "文件保存失败！"
								})
							}

						})
					}
				})
			},
			/**
			 * 删除
			 */
			handleDel() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确认是否删除？',
					confirmColor: '#FF943C',
					success: async function(res) {
						if (res.confirm) {
							console.log(that.imgs[that.currentImg]);
							await qxCloudMediaDelete({
								id: that.imgs[that.currentImg].id
							});
							uni.showToast({
								icon: 'none',
								title: '删除成功！'
							})

							delete that.imgs[that.currentImg]
							// uni.$u.route({
							// 	type: 'back',
							// })
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})

			},
			changeSwiper(e) {
				this.currentImg = e.detail.current;
				console.log("e", e);

				this.scrollTopIndex = `scrollToIndex${e.detail.current}`;
			},
			toImg(index) {
				this.currentImg = index;
			},
			onBack() {
				uni.navigateBack();
			},
			share() {
				uni.downloadFile({
					// 下面一行时拼接预览PDF的地址！！！
					url: this.imgs[this.currentImg],
					success: function(res) {
						var filePath = res.tempFilePath;
						if (!filePath) return;
						uni.openDocument({
							filePath: filePath,
							success: function(res) {
								console.log(res);
								console.log("打开文档成功");
							},
						});
					},
				});
			},
			saveImg(isAll = false) {
				const that = this;
				if (!isAll) {
					uni.downloadFile({
						url: this.imgs[this.currentImg],
						success: (res) => {
							if (res.statusCode === 200) {
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: function() {
										uni.showToast({
											icon: "none",
											title: "保存成功",
										});
										that.isPop = false;
									},
									fail: function() {},
								});
							} else {}
						},
					});
					return;
				}
				this.imgs.forEach((item) => {
					uni.downloadFile({
						url: item,
						success: (res) => {
							if (res.statusCode === 200) {
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: function() {
										uni.showToast({
											icon: "none",
											title: "保存全部成功",
										});
										that.isPop = false;
									},
									fail: function() {},
								});
							} else {}
						},
					});
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.swiper-content {
		width: 100%;
		height: 100vh;
		position: relative;
	}

	movable-view {
		display: flex;
		align-items: center;
		justify-content: center;

		width: 100%;
		height: 100%;
	}

	movable-area {
		position: fixed;

		overflow: hidden;

		width: 100%;
		height: 100%;

		transform: scale();
	}

	movable-view image {
		width: 100%;
	}

	uni-image>img {
		z-index: -1 !important;
	}

	.hander-top {
		position: absolute;
		z-index: 1000;
		top: 48rpx;
		left: 0;
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 0 32rpx;
		box-sizing: border-box;

		.icon-back-wrap {
			width: 64rpx;
			height: 64rpx;

			.icon-back {
				width: 64rpx;
				height: 64rpx;
			}
		}

		.count {
			box-sizing: border-box;
			padding: 8rpx 24rpx;

			color: #fff;
			border-radius: 24rpx;
			background: rgba(0, 0, 0, .4);

			font-size: 28rpx;
		}
	}

	.swiper-img {
		width: 100vw;
		height: 100vh;

		background-color: #000;

		.swiper-item {
			width: 100vw;
			height: 100vh;

			.img-page {
				display: flex;
				align-items: center;

				width: 100vw;
				height: 100vh;

				.max-img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.handle-wrap {
		position: absolute;
		z-index: 100;
		bottom: 40rpx;
		left: 0;

		width: 100%;
		display: flex;
		justify-content: space-between;
		padding: 32rpx;
		box-sizing: border-box;

		image {
			width: 64rpx;
			height: 64rpx;
		}

		width: 100%;
	}

	.item-bottom {
		position: fixed;
		z-index: 9999;
		bottom: 110rpx;
		left: 0rpx;

		display: flex;
		flex-direction: column;
		justify-content: space-between;

		width: 100vw;

		//  height: 200rpx;
		padding: 30rpx;

		transition: ease-in-out .3s;
	}

	.small-list-page {
		min-height: 60rpx;
	}

	.scroll-Y {
		height: 300rpx;
	}

	.scroll-view_H {
		width: 100%;
		box-sizing: border-box;
		padding-right: 32rpx;
		white-space: nowrap;
	}

	.scroll-view-item_H {
		display: inline-block;

		margin-right: 10rpx;

		transition: ease-in .1s;
		transform: scale(.8);

		border-radius: 11rpx;
		background: #c2c2c2;

		&:last-child {
			margin-right: 0;
		}

		.img {
			display: block;

			width: 160rpx;
			height: 272rpx;
		}
	}

	.img-page-checked {
		transform: translateY(-28rpx) scale(1);
	}

	.pop {
		position: fixed;
		z-index: 999999;
		top: 50%;
		left: 50%;

		overflow: hidden;

		width: 500rpx;

		transform: translate(-50%, -50%);

		border-radius: 20rpx;
		background-color: #fff;

		.item {
			height: 100rpx;
			padding: 0 50rpx;

			transition: all .2s;

			border-radius: 20rpx;

			line-height: 100rpx;

			&:active {
				background-color: #eee;
			}
		}
	}
</style>